<template>
  <div>
    <el-row>
      <div class="row-one">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <!--          服务端状态-->
            <div id="server" style="height: 200px;width: 100%;">
              <h1 style="width:400px;">
                CPU:
                <el-progress :text-inside="true" :stroke-width="26" :percentage="server_status.cpu_per"></el-progress>
              </h1>
              <br>
              <h1 style="width:400px;">
                MEMORY:
                <el-progress :text-inside="true" :stroke-width="24" :percentage="server_status.memory_per"
                             status="success"></el-progress>
              </h1>
              <br>
              <el-switch v-model="showStatus"></el-switch>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="6">
              <el-card shadow="always" class="box-card" style="background-color: 	rgba(3,165,158, 0.6)">
                <div class="text item">
                  <div style="margin-top:-20px;">
                    <h3>试卷总数</h3>
                    <span style="font-size: 25px;"><i class="el-icon-document-copy"></i></span>
                    <h2 style="position: relative; top: 8px;">{{ dataCount.paper_count }}</h2>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="always" class="box-card" style="background-color: 	#3D59AB">
                <div class="text item">
                  <div style="margin-top:-20px;">
                    <h3>试题总数</h3>
                    <span style="font-size: 25px;"><i class="el-icon-edit-outline"></i></span>
                    <h2 style="position: relative; top: 8px; color: gold">{{ dataCount.title_count }}</h2>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="always" class="box-card" style="background-color: 	#33A1C9">
                <div class="text item">
                  <div style="margin-top:-20px;">
                    <h3>考试总数</h3>
                    <span style="font-size: 25px;"><i class="el-icon-s-promotion"></i></span>
                    <h2 style="position: relative; top: 8px; color: gold">{{ dataCount.task_count }}</h2>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="always" class="box-card" style="background-color: 	#00C78C">
                <div class="text item">
                  <div style="margin-top:-20px;">
                    <h3>学生总数</h3>
                    <span style="font-size: 25px;"><i class="el-icon-medal-1"></i></span>
                    <h2 style="position: relative; top: 8px;">{{ dataCount.student_count }}</h2>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </div>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <div class="bottom-block">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <!--                    饼形图-->
            <div id="main2" style="height: 400px;width: 100%;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <!--                    柱状图-->
            <div id="main1" style="height: 400px;width: 100%;"></div>
          </div>
        </el-col>
      </div>
    </el-row>
    <div style="text-align: center; padding-bottom: 10px;">
      &COPY;copyleft@海饼干
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: "TeacherIndex",
  data() {
    return {
      chart1: null,
      chart2: null,
      title_type_list: [],
      name_list: [],
      score_list: [],
      showStatus: false,
      timer: null,
      timer1: null,
      dataCount: {
        student_count: 0,
        title_count: 0,
        paper_count: 0,
        task_count: 0,
      },
      server_status: {
        cpu_per: 0,
        memory_per: 0,
      },
      chartInstance: null,
    }
  },
  created() {
    this.getServerStatus()
    this.getDataCount()
    this.getCategory()
  },
  watch: {
    "showStatus": function () {
      if (this.showStatus) {
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          this.getServerStatus()
        }, 1000)
      } else {
        clearInterval(this.timer)
      }
    }
  },
  methods: {
    getServerStatus() {
      this.$http({
        url: this.$settings.BASE_URL + '/user/teacher_index/server_status/',
        method: 'get',
      }).then(res => {
        if (res.data.code === 20000) {
          this.server_status = res.data.server_status
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 3000,
          })
        }
      })
    },
    getDataCount() {
      this.$http({
        url: this.$settings.BASE_URL + '/user/teacher_index/data_count/',
        method: 'get',
      }).then(res => {
        if (res.data.code === 20000) {
          this.dataCount = res.data.result
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 3000,
          })
        }
      })
    },
    getCategory() {
      this.$http({
        url: this.$settings.BASE_URL + '/user/teacher_index/title_type/',
        method: 'get',
      }).then(res => {
        if (res.data.code === 20000) {
          this.title_type_list = res.data.result
          this.name_list = res.data.names
          this.score_list = res.data.scores
        }
      })
    },
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    // var myChart_3 = echarts.init(document.getElementById('main3'));
    // 使用刚指定的配置项和数据显示图表。
    // myChart_3.setOption(this.option_3);
    clearInterval(this.timer1)
    let i = 0
    this.timer1 = setInterval(() => {
      i++
      this.chart1 = echarts.init(document.getElementById('main1'));
      this.chart2 = echarts.init(document.getElementById('main2'));
      let option1 = {
        title: {
          text: '最近一次考试前五名'
        },
        tooltip: {},
        legend: {
          data: ['考生分数',]
        },
        xAxis: {
          data: this.name_list
        },
        yAxis: {},
        series: [{
          name: '考生分数',
          type: 'bar',
          data: this.score_list
        }]
      }
      let option2 = {
        title: {
          text: '题库题型占比',
          subtext: '所有题型',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '题目数量',
            type: 'pie',
            radius: '50%',
            data: this.title_type_list,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chart1.setOption(option1);
      this.chart2.setOption(option2);
      if (i === 1) {
        clearInterval(this.timer1)
      }
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer1)
  }
}
</script>

<style scoped>
.row-one {
  margin-top: 15px;
}

.bottom-block {
  position: relative;
  top: 10px;
}

.text {
  font-size: 14px;
  text-align: center;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 110px;
  height: 120px;
}
</style>
